<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <title>登录</title>

    <link rel="stylesheet" href="../../../template/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../../../template/website/css/app.css"/>
    <style type="text/css">
        body{
          background-image:url("../../../template/website/images/esop_login_background.png");
          background-repeat:no-repeat;
          background-size: 100%;
        }
        .input-group-style{
            background-color:#f8f8f8;
            border-radius:.3rem;
            /*border-left: 1px solid #f8f8f8;
            border-top: 1px solid #f8f8f8;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;*/
            border: 1px solid #f8f8f8;
            padding-left:0;
            padding-right:0;
        }
        .input-group-style img{
            width:1.8rem;
            height: auto;
        }
        .am-input-group-label {
            height: 38px;
            padding: 0 1em;
            font-size: 1.6rem;
            font-weight: 400;
            line-height: 36px;
            color: #555;
            text-align: center;
            background-color: #f8f8f8;
            border: 1px solid #f8f8f8;
            border-radius: 0;
        }
        .am-form-field {
            display: block;
            width: 100%;
            padding: .5em;
            font-size: 1.6rem;
            line-height: 1.2;
            color: #555;
            vertical-align: middle;
            background-color: #f8f8f8;
            background-image: none;
            border: 1px solid #f8f8f8;
            border-radius: 0;
            -webkit-appearance: none;
            -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        }
        hr{
            margin: .8rem;
        }
        .am-input-group-btn>.am-btn {
            position: relative;
            border-color: #5eb95e;
        }
    </style>
</head>

<body>
    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-text-center">
        <img src="../../../template/website/images/esop_login_logo.png"/>
      </div>
    </div>
    
    <div class="am-g am-margin-top-xl am-padding-horizontal-xl">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-text-center am-padding-vertical-sm input-group-style">
        <div class="am-input-group am-padding-right">
          <span class="am-input-group-label am-text-xs"><img src="../../../template/website/images/esop_user_icon.png"/>&nbsp;&nbsp;&nbsp;用户名：</span>
          <input type="text" class="am-form-field" placeholder="请输入工号/手机号" id="user-name"/>
        </div>
        <hr/>
        <div class="am-input-group am-padding-right">
          <span class="am-input-group-label"><img src="../../../template/website/images/esop_psd_icon.png"/>&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
          <input type="password" class="am-form-field" placeholder="请输入密码" id="password"/>
        </div>
        <hr/>
        <div class="am-input-group am-padding-right">
          <span class="am-input-group-label"><img src="../../../template/website/images/esop_sms_icon.png"/>&nbsp;&nbsp;&nbsp;验证码：</span>
          <input type="text" class="am-form-field" placeholder="请输入验证码" id="sms"/>
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-success am-btn-xs" type="button" id="sms-btn">获取</button>
          </span>
        </div>
      </div>
    </div>
   
    <div class="am-g am-margin-top-xl" id="login-btn">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-text-center">
        <img src="../../../template/website/images/esop_login_btn.png"/>
      </div>
    </div>

    <div class="am-g am-margin-vertical-lg" style="margin-top:8rem">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-text-center">
        <img src="../../../template/website/images/esop_login_copyright.png"/>
      </div>
    </div>
<script type="text/javascript" src="../../../template/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../template/assets/js/amazeui.min.js"></script>
<script type="text/javascript" src="../../../template/assets/js/handlebars.min.js"></script>
<script type="text/javascript" src="../../../template/assets/js/amazeui.widgets.helper.min.js"></script>
<script type="text/javascript" src="../../../template/website/js/app.js"></script>
<script type="text/javascript" src="../../../template/website/js/goventerprise/esop_demo/login.js"></script>
</body>
</html>